
/* =========================
   Search Bar Custom Styles
   ========================= */
.navbar {
  height: 60px;
  padding: 0 16px;
}   
// all of the navbar items
.navbar__link {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 12px;
  position: relative;
  transition: color 0.2s ease; /* Smooth text color transition */
}

// on hover of navbar items
.navbar__link:hover {
  background: var(--palette_slate_50);
  border-radius: 8px;
  padding: 12px 12px;
}

// Dark mode hover adjustment
[data-theme='dark'] .navbar__link:hover {
  background: rgba(255, 255, 255, 0.1);
}

// Remove hover background for active items
.navbar__link--active:hover {
  background: transparent;
}

// Keep default color on hover (don't change text color)
.navbar__link.navbar-docs-link:hover,
.navbar__link.navbar-reference-link:hover,
.navbar__link.navbar-contact-link:hover,
.navbar__link.navbar-api-link:hover {
  color: var(--ifm-navbar-link-color);
}

// But if it's active, keep the primary color even when hovering
.navbar__link--active.navbar-docs-link:hover,
.navbar__link--active.navbar-reference-link:hover,
.navbar__link--active.navbar-contact-link:hover,
.navbar__link--active.navbar-api-link:hover {
  color: var(--ifm-color-primary);
}

.navbar button[class*="toggleButton"] {
  background: transparent;
  border: none;
  box-shadow: none;
}

.navbar button[class*="toggleButton"]:hover {
  background: transparent;
  box-shadow: none;
}

/* Active state styling for navbar links */
.navbar__link--active.navbar-docs-link,
.navbar__link--active.navbar-reference-link,
.navbar__link--active.navbar-contact-link,
.navbar__link--active.navbar-api-link,
.navbar__link--active.navbar-icon-link {
  color: var(--ifm-color-primary);
}

/* Underline that only spans text width */
.navbar__link--active.navbar-docs-link::after,
.navbar__link--active.navbar-reference-link::after,
.navbar__link--active.navbar-contact-link::after,
.navbar__link--active.navbar-api-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background: var(--ifm-color-primary);
  border-radius: 1px 1px 0 0;
  width: calc(100% - 24px);
}


// NavBar Icon Link (GitHub and Blog) Change to Icons later
// NavBar Icon Link (GitHub and Blog) Change to Icons later
.navbar-icon-link {
  width: 24px;
  height: 24px;
  margin-right: 6px;
  margin-left: 6px;
  text-decoration: none;
  color: var(--ifm-menu-color);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.navbar-icon-link:hover {
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  color: var(--ifm-menu-color);
}

// NavBar Search Bar
.navbar .navbar__items--right .DocSearch-Button {
  background: transparent;
  border: 0.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 12px;
  width: 250px; /* Adjust this value to change width */
  min-width: 150px; /* Minimum width */
  height: 100%;
  position: relative;
  
  &::after {
    content: "⌘K";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--docsearch-muted-color);
    font-family: monospace;
    pointer-events: none;
  }
}

// Dark mode specific fixes for Search Bar
[data-theme='dark'] .navbar .navbar__items--right .DocSearch-Button {
    background: transparent;
    border: 0.5px solid var(--docsearch-muted-color);
    border-radius: 8px;
    padding: 12px 12px;
}

[data-theme='dark'] .navbar .navbar__items--right .DocSearch-Button:hover {
    box-shadow: none;
    color: var(--docsearch-muted-color);
    border: 0.5px solid var(--ifm-color-primary);
} 

// On hover of Search Bar
.navbar .navbar__items--right .DocSearch-Button:hover {
  box-shadow: none;
  color: var(--docsearch-muted-color);
  border: 0.5px solid var(--ifm-color-primary);
}

// Search Bar Search Icon
.navbar .navbar__items--right .DocSearch-Search-Icon {
  height: 16px;
  width: 16px;
}

// Search Bar Search Placeholder
.navbar .navbar__items--right .DocSearch-Button-Placeholder {
  font-size: 0.875rem;
}

.navbar .navbar__items--right .DocSearch-Button-Keys {  
    display: none;
}

.DocSearch--active .DocSearch-Footer {
    display: none;
}



@media (max-width: 996px) {
  /* Make custom HTML navbar items look like menu__link in mobile menu */
  .navbar .menu__list .menu__link,
  .navbar .menu__list .navbar-icon-link {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
    padding: 2.5px 9px;
    color: var(--ifm-menu-color);
    font-size: var(--default-font);
    text-decoration: none;
    border-radius: 4px;
    margin: 0;
    background: none;
    box-shadow: none;
  }

  .navbar .navbar__items--left .navbar-icon-link {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .navbar .navbar-icon-link {
    display: none !important;
  }

} 

@media (max-width: 768px) {
  .navbar .navbar__item {
    display: none 
  }
}

@media (max-width: 600px) {
  .navbar .navbar__items--right .DocSearch-Button {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    height: 36px;
    box-sizing: border-box;
  }
  .navbar .navbar__items--right .DocSearch-Button::after {
    display: none !important;
  }
}



/* Hide text on very small screens for right-side items */
@media (max-width: 480px) {
  .navbar .navbar__items--right .navbar-icon-link {
    display: none;
  }
} 

//Mobile Hamburger Menu Header

.navbar-sidebar__brand {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.navbar-sidebar__brand .mobile-nav-icon-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.navbar-sidebar__brand .mobile-nav-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar-sidebar__brand .mobile-nav-icon-link img {
  width: 100%;
  height: 100%;
}
